<template>
	<i-drawer v-model="showBind" title="你确认要删除该员工吗？" confirm_title="删除" @confirm="confirm"></i-drawer>
	<view class="staff_manager">
		<view class="staff_title" @click="navTo('/pagesA/views/staff_scale', 'navigateTo')" v-if="storeInfo.merType!='1'">
			<text class="title">员工提成比例</text>
			<view class="title_l">
				<text v-if="clerkRate">{{clerkRate}} %</text>
				<text v-else>未设置</text>
				<image src="../../static/images/right_black_icon.png" mode=""></image>
			</view>
			<text>为施工人员自动计算提成金额</text>
		</view>
		<i-scrollList notType="staff" @more="more" height="calc(100vh - 288rpx)" :total="pageData.total"
			:pageTotal="staffList.length">
			<i-card bottom="20rpx" v-for="(item,index) in staffList" :key="index" @click="toEdit(item)">
				<view class="card_item">
					<view class="card_left">
						<image :src="item.userHeadUrl" mode=""></image>
						<view class="user_name">
							<view class="name">
								<text>{{item.clerkName}}</text>
								<text
									v-if="item.entryStatus && item.entryStatus !== '1'">（{{entryStatus[item.entryStatus]}}）</text>
							</view>
							<text style="margin-bottom: 8rpx;">{{item.mobile}}</text>
							<text>{{item.nickName}}</text>
						</view>
					</view>
					<i-buttons color="#16161F" @click="off_bind(item.id)" v-if="item.entryStatus === '2'">删除</i-buttons>
				</view>
			</i-card>
			<view style="height: 88rpx"></view>
		</i-scrollList>
		<view class="flex_bottom" @click="toAdd">
			<image src="../../static/images/add@2x.png"></image>
			添加员工
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		navTo,
		getWindowHeight,
		showTost
	} from '../../utils/common'
	import {
		listMerClerk,
		clerkdelete
	} from '../../api/store'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		computed,
		reactive,
		ref
	} from 'vue'
	import useStore from '../../stores/index'

	const store = useStore()
	const storeInfo = computed(() => {
		return store.storeInfo
	})
	const showBind = ref(false)
	const pageData = reactive({
		total: 0,
		tyjPageNum: 1,
		tyjPageSize: 15
	})
	const staffList = ref<any[]>([])
	const activeId = ref('')

	const entryStatus = [
		'邀请中',
		'',
		'已拒绝',
	]

	const clerkRate = computed(() => {
		return (store.storeInfo?.clerkRate as unknown as number * 100).toFixed(1) || 0
	})

	const toAdd = () => {
		navTo('/pages/views/add_staff', 'navigateTo')
	}
	const toEdit = (i : { id : string, mobile : string, clerkName : string, entryStatus: string }) => {
		if(i.entryStatus !== '0') {
			navTo(`/pages/views/add_staff?id=${i.id}&mobile=${i.mobile}&clerkName=${i.clerkName || ''}`, 'navigateTo')
		}
	}

	const off_bind = (id : string) => {
		activeId.value = id
		showBind.value = true
	}
	const confirm = async () => {
		await clerkdelete({ id: activeId.value })
		showTost('删除成功')
		pageData.tyjPageNum = 1
		staffList.value = []
		getPageList()
	}
	const more = () => {
		pageData.tyjPageNum++
		getPageList()
	}

	const getPageList = async () => {
		const data = await listMerClerk({
			tyjPageNum: pageData.tyjPageNum,
			tyjPageSize: pageData.tyjPageSize,
			filter: 2
		})
		staffList.value = staffList.value.concat(data.rows)
		pageData.total = data.total
	}
	onShow(() => {
		pageData.total = 0
		pageData.tyjPageNum = 1
		staffList.value = []
		getPageList()
	})
</script>

<style lang="scss" scoped>
	.staff_manager {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: $backColor;

		.staff_title {
			@include flexC;
			width: calc(100% - 112rpx);
			margin: 0 auto;
			margin-bottom: 40rpx;
			margin-top: 24rpx;

			text {
				@include dfont(26rpx);
				color: #8E8E93;
			}

			.title {
				@include dfont(28rpx);
				margin-bottom: 24rpx;
			}

			.title_l {
				@include flexRS;
				margin-bottom: 8rpx;

				text {
					@include dprice(48rpx);
				}

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

		}

		.float {
			image {
				width: 104rpx;
				height: 104rpx;
			}
		}

		.card_item {
			@include flexRS;


			.card_left {
				@include flexR;
				align-items: flex-start;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 80rpx;
					margin-right: 24rpx;
				}

				.user_name {
					@include flexC;
					@include dfont(26rpx);
					color: #A0A0AD;

					.name {
						@include titlefont;
						margin-bottom: 4rpx;
					}
				}
			}
		}
	}
</style>